---
title: Field
description: A component that provides labelling and validation for form controls.

links:
  doc: https://base-ui.com/react/components/field#api-reference
---

<ComponentPreview name="p-field-1" />

## Installation

<CodeTabs>

<TabsList>
  <TabsTab value="cli">CLI</TabsTab>
  <TabsTab value="manual">Manual</TabsTab>
</TabsList>
<TabsPanel value="cli">

```bash
npx shadcn@latest add @coss/field
```

</TabsPanel>

<TabsPanel value="manual">

<Steps>

<Step>Install the following dependencies:</Step>

```bash
npm install @base-ui-components/react
```

<Step>Import the following variables into your CSS file</Step>

```css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
}

:root {
  --destructive-foreground: var(--color-red-700);
}

.dark {
  --destructive-foreground: var(--color-red-400);
}
```

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource
  name="field"
  title="components/ui/field.tsx"
/>

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsPanel>

</CodeTabs>

## Usage

```tsx
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldValidity,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
```

```tsx
<Field>
  <FieldLabel>Name</FieldLabel>
  <Input type="text" placeholder="Enter your name" />
  <FieldDescription>Visible on your profile</FieldDescription>
  <FieldError>Please enter a valid name</FieldError>
  <FieldValidity>
    {(validity) => (
      {validity.error && <p>{validity.error}</p>}
    )}
  </FieldValidity>
</Field>
```

## Examples

### Required Field

<ComponentPreview name="p-field-2" />

### Disabled Field

<ComponentPreview name="p-field-3" />

### With Error

Enter an invalid email address and press enter to see the error.

<ComponentPreview name="p-field-4" />

### With Validity

<ComponentPreview name="p-field-5"
  className="[& .preview>*]:w-full [&_.preview>*]:max-w-80"
/>

### Input Group

<ComponentPreview name="p-field-6" />

### Autocomplete Field

<ComponentPreview name="p-field-7" />

### Combobox Field

<ComponentPreview name="p-field-8" />

### Combobox Multiple Field

<ComponentPreview name="p-field-9" />

### Textarea Field

<ComponentPreview name="p-field-10" />

### Select Field

<ComponentPreview name="p-field-11" />

### Checkbox Field

<ComponentPreview name="p-field-12" />

### Checkbox Group Field

<ComponentPreview name="p-field-13" />

### Radio Group Field

<ComponentPreview name="p-field-14" />

### Switch Field

<ComponentPreview name="p-field-15" />

### Slider Field

<ComponentPreview name="p-field-16" />

### Number Field

<ComponentPreview name="p-field-17" />

### Complete Form Example

<ComponentPreview name="p-field-18" />
